<template>
    <div>
        <el-card style="width: auto;">
            <mytitle :showLine="false">新增设备</mytitle>
            <el-form :model="info" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
                <el-form-item label="设备类型" prop="type" style="width: 320px;">
                    <el-select v-model="info.type" placeholder="请选择设备类型" >
                        <el-option v-for="(item, index) in options" :key="index" :label="item.name"
                            :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备名称" prop="name" style="width: 320px;" v-if="info.type">
                    <el-input type="text" v-model="info.name"  placeholder="请输入设备名称" />
                </el-form-item>
                <el-form-item label="购买时间" prop="purchaseTime" style="width: 320px;" v-if="info.type">
                    <el-date-picker v-model="info.purchaseTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择时间"
                         style="width: 210px;" :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="设备序列号" prop="serial" style="width: 320px;">
                    <el-input type="text" v-model="info.serial"  placeholder="请输入设备序列号" />
                </el-form-item>
                <el-form-item label="设备厂商" prop="manufacturer" style="width: 320px;">
                    <el-input type="text" v-model="info.manufacturer"  placeholder="请输入设备厂商" />
                </el-form-item>
                <div></div>
                <el-form-item label="设备型号" style="width: 320px;">
                    <el-input type="text" v-model="info.model"  placeholder="请输入设备型号" />
                </el-form-item>
                <el-form-item label="用户账号" style="width: 320px;">
                    <el-input type="text" v-model="info.username"  placeholder="请输入用户账号" />
                </el-form-item>
                <el-form-item label="密码" style="width: 320px;">
                    <el-input type="text" v-model="info.password"  placeholder="请输入密码" />
                </el-form-item>
                <el-form-item label="appKey" style="width: 320px;">
                    <el-input type="text" v-model="info.appKey"  placeholder="请输入appKey" />
                </el-form-item>
                <div></div>
                <el-form-item label="appSecret" style="width: 320px;">
                    <el-input type="text" v-model="info.appSecret"  placeholder="请输入appKey" />
                </el-form-item>
                <el-form-item label="RTSP端口" style="width: 320px;">
                    <el-input type="text" v-model="info.rtsp"  placeholder="请输入RTSP端口" />
                </el-form-item>
                <el-form-item label="服务端口" style="width: 320px;">
                    <el-input type="text" v-model="info.service"  placeholder="请输入服务端口" />
                </el-form-item>
                <el-form-item label="HTTP端口" style="width: 320px;">
                    <el-input type="text" v-model="info.http"  placeholder="请输入HTTP端口" />
                </el-form-item>
                <div></div>
                <el-form-item label="IP/域名" style="width: 320px;">
                    <el-input type="text" v-model="info.ip"  placeholder="请输入IP/域名" />
                </el-form-item>
                <el-form-item label="高清地址" prop="rtspHd" style="width: 320px;">
                    <el-input type="text" v-model="info.rtspHd"  placeholder="请输入高清地址" />
                </el-form-item>
                <el-form-item label="通道号" prop="channel" style="width: 320px;">
                    <el-input type="text" v-model="info.channel"  placeholder="请输入通道号" />
                </el-form-item>
                <el-form-item label="物联网号" prop="wulianNo" style="width: 320px;">
                    <el-input type="text" v-model="info.wulianNo"  placeholder="请输入物联网号" />
                </el-form-item>
                <div></div>
                <el-form-item>
                    <el-button @click="submitForm('ruleForm')" type="success" >保存</el-button>
                    <el-button @click="$router.go(-1)" type="success"  plain>返回</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<script>
import { addEquipment } from '../util/api.js'
export default {
    data() {
        return {
            info: {
                name: "",//设备名称
                type: "",//类型
                model: "",//设备型号
                username: "",//用户名称
                manufacturer: "",//厂商
                serial: "",//设备序列号
                rtsp: "",//RTSP
                password: "",//密码
                service: "",//服务端口
                purchaseTime: "",//购买时间
                appKey: "",//appKey
                appSecret: "",//appSecret
                http: "",//HTTP端口
                ip: "",//IP/域名
                channel: "",// 通道号
                rtspHd: "",//直播源地址(高清)
                wulianNo: "",// 物联网号
            },
            options: [
                { name: '摄像机', id: 1, },
                { name: '定位仪', id: 2, },
                { name: '打印设备', id: 3, },
                { name: '气象传感', id: 4, },
                { name: '土壤', id: 5, },
                { name: '水质', id: 6, },
                { name: '杀虫灯', id: 7, },
                { name: '虫情', id: 8, },
                { name: '其他', id: 9, }
            ],
            pickerOptions: {
               disabledDate(time) {
                return time.getTime() > Date.now();
             }
            },
            rules: {
                name: [
                    { required: true, message: '请输入', trigger: 'blur' },
                ],
                type: [
                    { required: true, message: '请输入', trigger: 'change' },
                ],
                model: [
                    { required: true, message: '请选择', trigger: 'blur' }
                ],
                username: [
                    { required: true, message: '请输入', trigger: 'blur' },
                ],
                manufacturer: [
                    { required: true, message: '请输入', trigger: 'blur' },
                ],
                serial: [
                    { required: true, message: '请输入', trigger: 'blur' },
                ]
            }
        }
    },
    mounted() {


    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    // console.log(this.info)
                    let res = await addEquipment(this.info)
                    // console.log(res)
                    if (res.code != 200) return
                    this.$message.success('添加成功！')
                    this.$router.go(-1)
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },
    }
}
</script>
<style lang="less" scoped>
.avatar {
    width: 147px;
    height: 147px;
    border-radius: 5px;
}

.demo-ruleForm {
    width: 100%;

    .el-form-item {
        display: inline-block;
        margin-right: 20px;
    }
}
</style>